<template>
  <div class="pdf">
    <div class="top-tools">
      <el-tooltip effect="dark" content="刷新" placement="top">
        <el-button size="medium" circle icon="el-icon-refresh" @click.stop="refresh"></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="放大" placement="top">
        <el-button size="medium" :disabled="scale===200" circle icon="el-icon-zoom-in" @click.stop="scaleD"></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="缩小" placement="top">
        <el-button size="medium" :disabled="scale===50" circle icon="el-icon-zoom-out" @click.stop="scaleX"></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="顺时针" placement="top">
        <el-button size="medium" circle icon="el-icon-refresh-right" @click.stop="clock" ></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="逆时针" placement="top">
        <el-button size="medium" circle icon="el-icon-refresh-left" @click.stop="counterClock" ></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="打印" placement="top">
        <el-button size="medium" circle icon="el-icon-printer" @click.stop="pdfPrintAll"></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="下载" placement="top">
        <el-button size="medium" circle icon="el-icon-download" @click.stop="fileDownload"></el-button>
      </el-tooltip>
    </div>
    <div class="show">
      <el-empty v-show="error" description="加载失败"></el-empty>
      <el-scrollbar v-loading="loading" v-show="!error" style="height: 100%;">
        <pdf
          ref="pdf"
          :src="pdfSrc"
          :page="pageNum"
          :rotate="pageRotate"
          @password="password"
          @progress="loadedRatio = $event"
          @page-loaded="pageLoaded($event)"
          @num-pages="pageTotalNum = $event"
          @error="pdfError($event)"
          @link-clicked="page = $event"
        ></pdf>
      </el-scrollbar>
    </div>
    <el-divider class="divider"></el-divider>
    <div class="bottom-tools">
      <el-button size="mini" :disabled="pageNum<=1" @click.stop="prePage">上一页</el-button>
      <span>  {{pageNum}}/{{pageTotalNum}}  </span>
      <el-button size="mini" :disabled="pageNum===pageTotalNum" @click.stop="nextPage"> 下一页</el-button>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import pdf from "vue-pdf-signature";
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js'
import {getToken} from "@/utils/auth";

export default {
  name: "pdf_preview",
  props: {
    // 当前pdf路径
    pdfUrl: {
      type: String,
      default: "",
    },
    pdfName: {
      type: String,
      default: "文档",
    }
  },
  components: {
    pdf,
  },
  data() {
    return {
      loading: false,
      pdfSrc: "",
      // 总页数
      pageTotalNum: 1,
      // 当前页数
      pageNum: 1,
      // 加载进度
      loadedRatio: 0,
      // 页面加载完成
      curPageNum: 0,
      // 放大系数 默认百分百
      scale: 100,
      // 旋转角度 ‘90’的倍数才有效
      pageRotate: 0,
      // 单击内部链接时触发 (目前我没有遇到使用场景)
      page: 0,
      error: false,
    };
  },
  watch: {
    pdfUrl(newUrl){
      this.loadPdf(newUrl)
    }
  },
  errorCaptured() {
    return false
  },
  created() {},
  mounted() {
    this.loadPdf(this.pdfUrl)
  },
  methods: {
    loadPdf(url) {
      this.loading = true;
      this.pdfSrc = pdf.createLoadingTask({
        url: process.env.VUE_APP_BASE_API + url,
        withCredentials: true,
        httpHeaders: {
          "Authorization" : 'Bearer ' + getToken()
        },
        //引入汉字
        cMapPacked: true,
        CMapReaderFactory
      });
      this.pdfSrc.promise.then(pdf => { this.numPages = pdf.numPages;});
    },
    reset() {
      this.error= false
      this.pageRotate= 0
      this.scale= 100
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
      this.pageNum = 1
      this.pageTotalNum= 1
      this.loadedRatio= 0
      this.curPageNum= 0
    },
    //下载PDF
    fileDownload() {
      this.$download.pdf(this.pdfUrl,this.pdfName+".pdf")
    },
    //放大
    scaleD() {
      this.scale += 5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },

    //缩小
    scaleX() {
      // scale 是百分百展示 不建议缩放
      if (this.scale === 50) {
        return;
      }
      this.scale += -5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    // 切换上一页
    prePage() {
      var p = this.pageNum;
      p = p > 1 ? p - 1 : this.pageTotalNum;
      this.pageNum = p;
    },
    // 切换下一页
    nextPage() {
      var p = this.pageNum;
      p = p < this.pageTotalNum ? p + 1 : 1;
      this.pageNum = p;
    },
    // 顺时针选中角度
    clock() {
      this.pageRotate += 90;
    },
    // 逆时针旋转角度
    counterClock() {
      this.pageRotate -= 90;
    },
    // pdf 有密码 则需要输入秘密
    password(updatePassword, reason) {
      updatePassword(prompt('password is "test"'));
      console.log("...reason...");
      console.log(reason);
      console.log("...reason...");
    },
    // 页面加载成功  当前页数
    pageLoaded(e) {
      this.$emit("current", e);
      this.curPageNum = e;
      this.loading = false
    },
    // 异常监听
    pdfError(error) {
      this.pageNum = 0
      this.pageTotalNum = 0
      this.loading = false
      this.error = true
      console.log(error)
    },
    // 打印所有
    pdfPrintAll() {
      this.$refs.pdf.print();
    },
    refresh() {
      this.scale = 100
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
      this.pageRotate = 0
      this.error = false
      this.loadPdf(this.pdfUrl)
    },
    // 打印 第一页和第二页
    pdfPrint() {
      // 第一个参数 文档打印的分辨率
      // 第二个参数 文档打印的页数
      this.$refs.pdf.print(100, [1, 2]);
    },
    // 获取当前页面pdf的文字信息内容
    logContent() {
      this.$refs.pdf.pdf.forEachPage(function (page) {
        return page.getTextContent().then(function (content) {
          let text = content.items.map((item) => item.str);
          let allStr = content.items.reduce(
            (initVal, item) => (initVal += item.str),
            ""
          );
          console.log(allStr); // 内容字符串
          console.log(text); // 内容数组
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pdf {
  .show {
    overflow: auto;
    margin: auto;
    //max-width: 75%;
    height: 60vh;
    ::-webkit-scrollbar {
      width: 0 !important;
    }
    ::-webkit-scrollbar {
      width: 0 !important;height: 0;
    }
  }
  .divider {
    margin: 3px 0
  }
  .top-tools {
    padding-bottom: 3px;
    text-align: center;
  }
  .bottom-tools {
    padding-top: 3px;
    text-align: center;
  }
}
</style>
